<template>
	<div>
		<!-- 搜索条件 -->
        <el-card class="mgb20" shadow="hover">
            <div slot="header" class="clearfix">
                <span>筛选查询</span>
            </div>
            <el-form :inline="true" :model="searchData" ref="ruleForm" label-width="90px" :rules="rules">
                <el-form-item label="退货单号：" prop="requestId">
                    <el-input 
                        v-model="searchData.requestId"
                        placeholder="请输入退货单号"
                        style="width: 150px;margin-right: 20px;">
                    </el-input>
                </el-form-item>
                <el-form-item label="订单编号：" prop="orderId">
                    <el-input 
                        v-model="searchData.orderId"
                        placeholder="请输入订单编号"
                        style="width: 150px;margin-right: 20px;">
                    </el-input>
                </el-form-item>
                <el-form-item label="商品名称：" prop="productName">
                    <el-input 
                        v-model="searchData.productName"
                        placeholder="请输入商品名称"
                        style="width: 150px;margin-right: 20px;">
                    </el-input>
                </el-form-item>
                <el-form-item label="SKU ID：" prop="skuId">
                    <el-input 
                        v-model="searchData.skuId"
                        placeholder="请输入sku编号"
                        style="width: 150px;margin-right: 20px;">
                    </el-input>
                </el-form-item>
                <el-form-item label="申请时间：" prop="applyTime">
                    <el-date-picker
                        v-model="searchData.applyTime"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        :picker-options="searchData.pickerOptions"
                        class="datetimerange"
                        >
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="售后状态：" prop="afterSaleStatus" v-if="orderStatus==''">
                    <el-select v-model="searchData.status" style="width: 130px;margin-right: 15px;">
                        <el-option value="" label="全部"></el-option>
                        <el-option
                            v-for="(val, key) in searchData.statusList"
                            :key="key"
                            :label="val"
                            :value="key">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="submitForm('ruleForm')">查询</el-button>
                    <el-button icon="el-icon-refresh" @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>

		<!-- 数据列表 -->
        <el-card class="mgb20" shadow="hover">
            <div slot="header" class="clearfix">
                <span>数据列表</span>
                <div class="contWrap">
                    排序方式：
                    <el-select v-model="sortType" @change="getData">
                        <el-option label="添加时间倒序" :value="1"></el-option>
                        <el-option label="添加时间正序" :value="0"></el-option>
                    </el-select>
                </div>
            </div>
            <el-table
                ref="list"
                border
                :data="dataList"
                tooltip-effect="dark"
                style="width: 100%;">
                <el-table-column
                    prop="applyId"
                    label="退货单号">
                </el-table-column>
                <el-table-column
                    prop="orderId"
                    label="订单编号"
                    width="150">
                </el-table-column>
                <el-table-column
                    prop="productName"
                    label="商品名称">
                </el-table-column>
                <el-table-column
                    prop="skuId"
                    label="SKU ID"
                    width="150">
                </el-table-column>
                <el-table-column
                    prop="totalCount"
                    label="售后数量"
                    width="120">
                </el-table-column>
                <el-table-column
                    label="申请时间"
                    width="150">
                    <template slot-scope="scope">
                        {{scope.row.createTime | formatDate}}
                    </template>
                </el-table-column>
                <el-table-column
                    label="状态更新时间"
                    width="150">
                    <template slot-scope="scope">
                        {{scope.row.updateTime | formatDate}}
                    </template>
                </el-table-column>
                <el-table-column
                    label="售后状态"
                    width="120">
                    <template slot-scope="scope">
                        {{searchData.showstatusList[scope.row.status] || '未知'}}
                    </template>
                </el-table-column>
                <el-table-column
                    label="退货物流"
                    v-if="orderStatus != 1 && orderStatus != 2"
                    min-width="150">
                    <template slot-scope="scope">
                        <span v-for="express in scope.row.expressList" class="express" :key="express">{{express}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    fixed="right"
                    width="120"
                    label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" @click="checkDetail(scope.row.applyId)">详情</el-button>
                        <el-button type="text" 
                            v-if="scope.row.status == 2 && scope.row.expressList.length == 0" 
                            @click="editLog(1,scope.row)">填写物流
                        </el-button>
                        <el-button type="text" 
                            v-if="scope.row.expressList.length > 0 && (scope.row.status ==2 || scope.row.status == 3)"  
                            @click="editLog(2,scope.row)">修改物流
                        </el-button>
                        <el-button type="text" class="red" v-if="scope.row.status == 1" @click="cancleApply(scope.row.applyId)">取消售后</el-button>
                        <!-- <el-button type="text" class="red" disabled v-if="scope.row.status == 5">拒绝取消售后</el-button> -->
                    </template>
                </el-table-column>
            </el-table> 
        </el-card>

        <el-card class="mgb20" shadow="hover" v-if="total > 0">
            <el-row>
                <el-pagination
                    @current-change="getData"
                    :current-page.sync="current"
                    :page-size="pageSize"
                    layout="total, prev, pager, next, jumper"
                    style="float:right"
                    :total="total">
                </el-pagination>
            </el-row>
        </el-card>

        <!-- 修改物流信息组件 -->
        <edit-form-log
            :type="editType"
            :editFormLog="editFormLog"
            :applyId="editId"
            ref="editFormRef"
            @getData="getData">
        </edit-form-log>
	</div>
</template>

<script>
	export default {
		props:['orderStatus'],
		data() {
			let checkNum = (rule, value, callback)=>{
				if(value ==''){
					callback();
				}
				if(!this.util.RegExpr.checkNum(value)){
					callback(new Error('此字段只支持数字'));
				}else{
					callback();
				}
			};
			return{
				rules:{
					id: [
						{ validator: checkNum, trigger: 'blur', require : false}
					],
                    orderNum: [
                        { validator: checkNum, trigger: 'blur', require : false}
                    ]
				},
				searchData : {
					requestId: '',   //退货单号
                    orderId: '',     //订单编号
                    productName: '', //商品名称
                    skuId: '',       //SKU ID
                    applyTime: '',   //申请时间
                    status: this.orderStatus,   //售后状态
                    statusList: {
                        1 : '审核中',
                        2 : '待退货',
                        3 : '寄送中',
                        9 : '收货审核中',
                        4 : '已退款',
                        5 : '驳回',
                        6 : '已取消',
                    },
                    showstatusList: {
                        1 : '审核中',
                        2 : '待退货',
                        3 : '寄送中',
                        9 : '收货审核中',
                        4 : '已退款',
                        5 : '驳回',
                        6 : '已取消', // 用户取消
                        7 : '已取消', // 系统取消
                        8 : '已取消', // 客服取消
                        11: '驳回', // 客服拒绝
                    },
                    pickerOptions: {
                        disabledDate: (time)=>{
                            return time.getTime() > Date.now();
                        }
                    },
                },
                sortType : 1,   //排序方式，默认倒序
                dataList : [],  //请求到的数据集合
                current : 1,  //当前页码
                pageSize : Number(localStorage.getItem('pageSize')),
                total : 100,
                editFormLog : {},     //添加/修改物流信息obj                
                editType : 1,
                editId : ''
			}
		},
        computed: {
            createStartTime(){
                if(this.searchData.applyTime instanceof Array){
                    return this.searchData.applyTime[0];
                }
                return "";
                    
            },
            createEndTime(){
                if(this.searchData.applyTime instanceof Array){
                    return this.searchData.applyTime[1];
                }
                return "";
            }
        },
		methods:{
			resetForm(formName){
                this.$refs[formName].resetFields();
            },
            submitForm(formName){
            	this.$refs[formName].validate((valid) => {
					if (valid) {
						this.getData();
					} else {
						return false;
					}
		        });
            },
            getData(){
                this.$axios
                    .post("/admin/refund/queryRefundOrders.json",{
                        requestId: this.searchData.requestId,
                        orderId: this.searchData.orderId,
                        productName: this.searchData.productName,
                        skuId: this.searchData.skuId,
                        createStartTime: this.createStartTime,
                        createEndTime: this.createEndTime,
                        status: this.searchData.status,
                        orderBy : this.sortType,
                        pageNo: this.current,
                        pageSize: this.pageSize
                    })
                    .then(res => {
                        const data = res.data;
                        if(data.success){
                            this.dataList = data.list;
                            
                            if(data.pageInfo){
                                //获取分页信息
                                this.current = data.pageInfo.pageIndex;
                                this.total = data.pageInfo.recordCount;
                            }
                        }else{
                            this.$message.error(data.message);
                        } 
                    })
            },
            checkDetail(applyId){
                this.$router.push({'path': '/afterSaleDetail',query:{applyId:applyId}});
            },
            editLog(type,data){   //type: 1/填写   2/修改
                this.editType = type;
                if(this.editType == 1){    //填写
                    this.editFormLog = {};
                }else{      //修改
                    this.editFormLog = {
                        logCompany : data.expressList[0].split("/")[0],
                        logNum : data.expressList[0].split("/")[1]
                    };
                }
                this.editId = data.applyId;
                this.$refs['editFormRef'].dialogShow = true;
            },
            cancleApply(applyId){
                this.$axios
                .post('/admin/refund/orderRefundCancel.json',{
                    applyId : applyId
                })
                .then(res=>{
                    const data = res.data;
                    if(data.success){
                        this.$message.success("取消售后成功");
                        this.getData(); // 更新数据
                    }else{
                        this.$message.error(data.message);
                        return false;
                    } 
                })
            }
        },
        mounted(){
            this.getData();
        }
	}
</script>

<style scoped>
	.datetimerange{
		width: 350px;
	}
	.contWrap{
        float: right;
        margin-top: -6.5px;
    }
    .contWrap .el-select{
        width: 150px;
    }
    .red{
        color: red;
    }
    .dialogInput{
        width: 215px;
    }
    .express{
        display: inline-block;
        margin-left: 10px;
        line-height: 100%;
        padding: 9px 0;
    }
</style>
